<template>
  <div>
    <BasicTable @register="registerTable" :maxHeight="450">
      <!-- 注释 -->
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <div class="flex justify-center">
            <TableAction :actions="tableActions(record)" />
          </div>
        </template>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    ActionItem,
    EditRecordRow,
    CheckboxRender,
    InputRender,
    InputNumberRender,
    SelectRender,
  } from '@/components/Table';

  import { list } from '@/api/toolkit/column';
  import { onMounted, onUnmounted } from 'vue';

  // 自定义组件名称, 默认为文件名
  defineOptions({ name: 'ColumnSetting' });

  let props = defineProps(['id']);
  const tableId: number = props.id;

  // 表格列
  const tableColumns: BasicColumn[] = [
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      width: '5rem',
      align: 'left',
      fixed: 'left',
    },

    {
      title: '数据库类型',
      dataIndex: 'columnFullType',
      width: '5rem',
      align: 'left',
    },
    {
      title: '描述',
      dataIndex: 'columnComment',
      width: '10rem',
      align: 'left',
    },

    {
      title: '标签',
      dataIndex: 'listLable',
      width: '10rem',
      customRender: ({ record, column }) => InputRender(record, column),
    },
    {
      title: '显示',
      dataIndex: 'listEnable',
      width: '5rem',
      customRender: ({ record, column }) => CheckboxRender(record, column),
    },
    {
      title: '宽度',
      dataIndex: 'listWidth',
      width: '5rem',
      customRender: ({ record, column }) => InputNumberRender(record, column),
    },
    {
      title: '居中',
      dataIndex: 'listAlign',
      width: '5rem',
      customRender: ({ record, column }) => CheckboxRender(record, column),
    },
    {
      title: '组件',
      dataIndex: 'listComponent',
      width: '10rem',
      customRender: ({ record, column }) =>
        SelectRender(record, column, {
          options: [
            { label: 'Input', value: 'Input' },
            { label: 'InputNumber', value: 'InputNumber' },
            { label: 'Select', value: 'Select' },
            { label: 'TextArea', value: 'TextArea' },
            { label: 'Date', value: 'Date' },
            { label: 'DateTime', value: 'DateTime' },
          ],
        }),
    },
    {
      title: '导出',
      dataIndex: 'listExportEnable',
      width: '5rem',
      customRender: ({ record, column }) => CheckboxRender(record, column),
    },
    {
      title: '导入',
      dataIndex: 'listImportEnable',
      width: '5rem',
      customRender: ({ record, column }) => CheckboxRender(record, column),
    },
    {
      title: '批量删除',
      dataIndex: 'listBatchDeleteEnable',
      width: '5rem',
      customRender: ({ record, column }) => CheckboxRender(record, column),
    },
    {
      title: '序号',
      dataIndex: 'listShowIdx',
      width: '5rem',
      customRender: ({ record, column }) => CheckboxRender(record, column),
    },

    {
      title: '编辑',
      children: [
        {
          title: '标签',
          dataIndex: 'editLable',
          width: '10rem',
          customRender: ({ record, column }) => InputRender(record, column),
        },
        {
          title: '新增',
          dataIndex: 'insertEnable',
          width: '5rem',
          customRender: ({ record, column }) => CheckboxRender(record, column),
        },
        {
          title: '更新',
          dataIndex: 'updateEnable',
          width: '5rem',
          customRender: ({ record, column }) => CheckboxRender(record, column),
        },
        {
          title: '更新可编辑',
          dataIndex: 'updateEdit',
          width: '5rem',
          customRender: ({ record, column }) => CheckboxRender(record, column),
        },
        {
          title: '必传',
          dataIndex: 'editRequired',
          width: '5rem',
          customRender: ({ record, column }) => CheckboxRender(record, column),
        },
      ],
    },

    {
      title: '操作',
      dataIndex: 'action',
      width: '10rem',
      fixed: 'right',
    },
  ];

  // 表格-按钮
  const tableActions = (record): ActionItem[] => [
    {
      icon: 'humbleicons:download',
      tooltip: '生成代码',
      popConfirm: {
        title: '生成会覆盖现有代码',
        placement: 'top',
        confirm: generateTs.bind(null, record),
      },
    },
  ];

  async function queryTableColumns() {
    return await list({ tableId });
  }

  // 注册表格
  const [registerTable, { reload }] = useTable({
    api: queryTableColumns,
    columns: tableColumns,
    useSearchForm: false, // 搜索框配置: 是否打开搜索框、搜索框配置
    showTableSetting: false, // 是否显示设置按钮
    size: 'small',
    bordered: true, // 是否包含边框
    showIndexColumn: true, // 是否包含序号列
    rowKey: 'id',
    pagination: false,
    titleHelpMessage: '根据服务端领域对象 Ts 的对象',
    immediate: true,
  });

  // 删除
  async function generateTs(record: Recordable) {
    reload();
  }
  console.log('溪红心阿斯顿法师打发斯蒂芬');

  onMounted(() => {
    console.log('执行mounted  *** ');
  });

  onUnmounted(() => {
    console.log('xxxxx -> onUnmounted');
  });

  // defineExpose({
  //   validate
  // });
</script>
